<template>
	<cl-crud ref="Crud">
		<cl-row>
			<!-- 刷新按钮 -->
			<cl-refresh-btn/>
			<!-- 新增按钮 -->
			<cl-add-btn/>
			<!-- 删除按钮 -->
			<cl-multi-delete-btn/>

			<cl-flex1/>
			<!-- 关键字搜索 -->
			<cl-search-key placeholder="搜索品牌名称、公司名称"/>
		</cl-row>

		<cl-row>
			<!-- 数据表格 -->
			<cl-table ref="Table"/>
		</cl-row>

		<cl-row>
			<cl-flex1/>
			<!-- 分页控件 -->
			<cl-pagination/>
		</cl-row>

		<!-- 新增、编辑 -->
		<cl-upsert ref="Upsert"/>
	</cl-crud>
	<cl-dialog   v-model="addApiVisible" title="起步" width="70%">
		<div style="height: 700px">
		 <chess-brand-api></chess-brand-api></div>
	</cl-dialog>
</template>

<script lang="ts" name="chess_brand-brand" setup>
import {useCrud, useTable, useUpsert,useForm } from "@cool-vue/crud";
import {useCool} from "/@/cool";
import {ElMessage} from "element-plus";
import {ref} from "vue";
import ChessBrandApi from "/$/chess_brand_api/views/info.vue";

const UserForm = useForm();

function open() {
	UserForm.value?.open({
		title: "自定义表单",
		items: [
			{
				label: "name",
				prop: "name",
				value: "神仙都没用",
				required: true,
				component: {
					name: "el-input",
				},
			},
		],
		on: {
			submit(data, { close, done }) {
				console.log(data);
				setTimeout(() => {
					close();
				}, 1500);
			},
		},
	});
}
const {service} = useCool();
const addApiVisible = ref(false);
// cl-upsert
const Upsert = useUpsert({
	items: [
		{
			label: "品牌名称",
			prop: "brandName",
			component: {name: "el-input", props: {clearable: true}},
			required: true
		},
		{
			label: "公司名称",
			prop: "companyName",
			component: {name: "el-input", props: {clearable: true}},
			required: true
		},
		{
			label: "注册时间",
			prop: "registrationTime",
			component: {
				name: "el-date-picker",
				props: {type: "date", valueFormat: "YYYY-MM-DD"}
			},
			required: true
		},
		{
			label: "域名",
			prop: "domain",
			component: {name: "el-input", props: {clearable: true}},
			required: true
		},
		{
			label: "appId",
			prop: "appId",
			component: {name: "el-input", props: {clearable: true}},
			required: true
		}
	]
});

// cl-table
const Table = useTable({
	columns: [
		{type: "selection"},
		{label: "品牌名称", prop: "brandName", minWidth: 140},
		{label: "公司名称", prop: "companyName", minWidth: 140},
		{
			label: "注册时间",
			prop: "registrationTime",
			minWidth: 140,
			sortable: "custom",
			component: {name: "cl-date-text"}
		},
		{label: "域名", prop: "domain", minWidth: 140},
		{label: "appId", prop: "appId", minWidth: 140},
		{
			label: "更新时间",
			prop: "updateTime",
			minWidth: 170,
			sortable: "custom",
			component: {name: "cl-date-text"}
		},
		{
			label: "创建时间",
			prop: "createTime",
			minWidth: 170,
			sortable: "desc",
			component: {name: "cl-date-text"}
		},
		{
			type: "op",
			width: 320,
			// 静态配置按钮

			// 动态配置按钮
			buttons({scope}) {
				return [
					"edit",
					"delete",
					{
						label: "添加接口",
						onClick() {

							open();
							addApiVisible.value = true;
							ElMessage.info(`他是：${scope.row.name}`);
						}
					}
				];
			}
		}
		/*	{ type: "op", buttons: ["""edit", "delete"] }*/
	]
});

// cl-crud
const Crud = useCrud(
	{
		service: service.chess_brand.brand
	},
	(app) => {
		app.refresh();
	}
);

// 刷新
function refresh(params?: any) {
	Crud.value?.refresh(params);
}
</script>
